<template>
  <div class="societyrelease">
    <header>
      <div @click="goBack">取消</div>
      <div @click="send">发布</div>
    </header>
    <div class="release_content">
      <van-field
        v-model="content"
        rows="1"
        autosize
        type="textarea"
        placeholder="分享新鲜事..."
        maxlength="250"
        show-word-limit
      />
      <div class="uploadfile">
        <van-uploader
          v-model="fileList"
          :max-size="100*1024*1024"
          :multiple="multiple"
          :max-count="maxCount"
          :after-read="uploadfile"
          :before-read="beforeRead"
          accept="*/*"
          @oversize="oversize(1)"
          @delete="deleteThis"
        />
      </div>
      <div class="video_cover" v-if="isVideo">
        <p>上传视频封面</p>
        <van-uploader
          v-model="coverList"
          :max-count="1"
          :max-size="5*1024*1024"
          :after-read="afterUploadCover"
          accept="image/*"
          @oversize="oversize(2)"
          @delete="deleteCover"
        />
      </div>
    </div>
    <van-overlay :show="show" class="loading">
      <van-loading size="2.4rem" :vertical="true">上传中...</van-loading>
    </van-overlay>
    <van-field
      readonly
      clickable
      label="分类"
      :value="value"
      placeholder="选择分类"
      @click="showPicker = true"
      class="select_class"
    />
    <van-popup v-model="showPicker" position="bottom" :loading="loading">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        value-key="text"
      />
    </van-popup>
    <div class="good_info" v-if="goodsinfo !== ''">
      <van-image
        width="1rem"
        height="1rem"
        fit="cover"
        :src="goodsinfo.image"
      />
      <div class="info">
        <span class="van-ellipsis">{{goodsinfo.store_name}}</span>
        <p>￥{{goodsinfo.price}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '', // 内容
      fileList: [],
      coverList: [],
      image: [], // 图片
      video_id: [], // 视频
      isVideo: false,
      multiple: true,
      maxCount: 100,
      cover: '', // 封面
      keys: '',
      show: false,
      columns: [],
      classify: '', // 分类
      showPicker: false,
      loading: false,
      type: '', // 2图片3视频
      value: '',
      goodsinfo: ''
    }
  },
  methods: {
    uploadfile () {
      this.show = true
      this.$upload(this.fileList).then(res => {
        this[this.keys] = res
        this.show = false
      }).catch(_ => {
        this.show = false
      })
    },
    afterUploadCover (file) {
      this.show = true
      this.$upload(file).then(res => {
        this.cover = res.join(',')
        this.show = false
      }).catch(_ => {
        this.show = false
      })
    },
    beforeRead (file) {
      let videoNum = 0
      let imgNum = 0
      if (Array.isArray(file)) {
        for (let x in file) {
          if (file[x].type.indexOf('video/') > -1) {
            if (videoNum === 0 && this.video_id === '') {
              if (imgNum === 0) {
                videoNum++
              } else {
                this.$dialog({ message: '图片与视频不能同时上传' })
                return false
              }
            } else if (videoNum !== 0 && imgNum === 0) {
              this.$dialog({ message: '不能上传多个视频' })
              return false
            }
          } else if (file[x].type.indexOf('image/') > -1) {
            if (videoNum === 0) {
              imgNum++
            } else {
              this.$dialog({ message: '图片与视频不能同时上传' })
              return false
            }
          } else {
            this.$dialog({ message: '只能上传图片和视频' })
            return false
          }
        }
        this.isVideo = false
        this.maxCount = 100
        this.multiple = true
        this.keys = 'image'
        return true
      } else {
        if (file.type.indexOf('video/') > -1) {
          if (this.video_id.length > 0) {
            this.$dialog({ message: '不能上传多个视频' })
            return false
          } else if (this.fileList.length > 0) {
            this.$dialog({ message: '图片与视频不能同时上传' })
            return false
          } else {
            this.isVideo = true
            this.maxCount = 1
            this.multiple = false
            this.keys = 'video_id'
            return true
          }
        } else if (file.type.indexOf('image/') > -1) {
          this.multiple = true
          this.isVideo = false
          this.maxCount = 100
          this.keys = 'image'
          return true
        } else {
          this.$dialog({ message: '只能上传图片和视频' })
          return false
        }
      }
    },
    onConfirm (value) {
      this.value = value.text
      this.classify = value.id
      this.showPicker = false
    },
    getcategories () {
      this.loading = true
      this.$axios.get('/api/social/categories').then(res => {
        res.data.forEach(item => {
          let obj = {
            text: item.name,
            id: item.id
          }
          this.columns.push(obj)
        })
        this.loading = false
      })
    },
    send () {
      if (this.content === '') {
        this.$dialog({ message: '文字内容不能为空' })
        return false
      } else if (this.image === '' && this.video_id === '') {
        this.$dialog({ message: '请上传图片或者视频' })
        return false
      } else if (this.classify === '') {
        this.$dialog({ message: '请选择分类' })
        return false
      } else {
        if (this.image.length !== 0 && this.video_id.length === 0) {
          this.type = 2
        } else if (this.image.length === 0 && this.video_id.length !== 0) {
          this.type = 3
        }
        this.$axios.post('/api/user/social', {
          content: this.content,
          type: this.type,
          video_id: this.video_id.join(','),
          image: this.image.join(','),
          cover: this.cover,
          classify: this.classify,
          city_code: this.$store.state.cityCode === '' ? 138 : this.$store.state.cityCode,
          product_id: this.$route.query.id ? this.$route.query.id : ''
        }).then(res => {
          if (res.status === 200) {
            this.$dialog({
              message: '发布成功'
            }).then(_ => {
              this.$router.replace('/society')
            })
          } else {
            if (res.status < 40000) {
              this.$dialog({
                message: res.msg
              })
            }
          }
        })
      }
    },
    goBack () {
      this.$router.replace('/society')
    },
    oversize (type) {
      this.$dialog({ message: '文件过大' })
      if (type === 1) {
        this.isVideo = false
      }
      return false
    },
    deleteThis (_, detail) {
      console.log(detail)
      this[this.keys].splice(detail, 1)
    },
    deleteCover () {
      this.cover = ''
    },
    getGood (id) {
      this.$axios.get(`/api/product/detail/${id}`).then(res => {
        if (res.status === 200) {
          this.goodsinfo = res.data.storeInfo
        }
      })
    }
  },
  created () {
    this.getcategories()
    if (this.$route.query.id) {
      this.getGood(this.$route.query.id)
    }
  }
}
</script>

<style lang="scss">
.societyrelease{
  header{
    padding: .16rem .32rem;
    color: #333333;
    font-size: .32rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .02rem solid #e4e4e4;
    &>div:last-child{
      color: #FF2A1F;
    }
  }
  .van-cell:not(:last-child)::after{
    border: unset;
  }
  .uploadfile{
    padding: .82rem .32rem 0;
    .van-uploader__wrapper{
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .van-uploader__preview{
        width: 2.18rem;
        height: 2.18rem;
        margin: .32rem .16rem 0 0 !important;
        .van-image{
          width: 100%;
          height: 100%;
        }
      }
      .van-uploader__upload{
        width: 2.18rem;
        height: 2.18rem;
        margin: .32rem 0 0 0 !important;
      }
      .van-uploader__preview:nth-child(3n){
        margin-right: 0 !important;
      }
      .van-uploader__file{
        width: 100%;
        height: 100%;
      }
    }
  }
  .video_cover{
    padding: .82rem .32rem 0;
    p{
      font-size: .32rem;
      margin-bottom: .32rem;
    }
  }
  .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    .van-loading__text{
      font-size: .36rem;
      font-weight: bold;
    }
  }
  .select_class{
    margin-top: .32rem;
    .van-cell__title{
      font-size: .32rem;
    }
    .van-field__control{
      font-size: .32rem;
    }
  }
  .good_info{
    display: flex;
    margin: .24rem .32rem;
    padding: .16rem;
    border-radius: .16rem;
    background: #f6f6f6;
    .info{
      margin-left: .24rem;
      span{
        font-size: .28rem;
        font-weight: 700;
      }
      p{
        margin-top: .3rem;
        font-size: .24rem;
        color: #FF2A1F;
      }
    }
  }
}
</style>
